.div-container-scene{
    height: 86vh;
}

.container-fluid.pre-scrollable {
    max-height: 83vh;
    overflow: auto;  /* 内容超过指定高度会出现滚动条 */
}

.container-fluid.element-copy-tree.pre-scrollable {
    height: 60vh;
    max-height: 100%;
    overflow: auto;  /* 内容超过指定高度会出现滚动条 */
}
/*左侧组件导航*/
.element-navigation{
    height: 100%;
}

/*各个类型组件容器*/
.div-container-element{
    height: 100%;
}

/*.div-embed-responsive-iframe-case{*/
    /*width: 100%;*/
    /*height: 100%*/
/*}*/

.element-navigation .nested-sortable{
    min-height: 4vh;
    width: 100%;
}

.element-navigation .scene-name{
    height: 5vh;
    line-height: 5vh;  /*行文本高度与div高度相同，实现div文本垂直居中效果*/
    width: 100%;
    /*当文本超过宽度时使用省略号（white-space overflow text-overflow）*/
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.element-navigation .item-scene-header{
    background-color: #e1e1e1;
}
.element-navigation .item-scene-header.active{
    background-color: #c3c3c3;
}

.element-navigation .item-case{
    border-left-width: 5px;
    border-left-color: #1e90ff;
    border-left-style: solid;
}
.element-navigation .item-case:hover{
    background-color: #ebf4fe;
}
.element-navigation .item-case.active{
    background-color: #ebf4fe;
    color: #000;
    z-index: auto;
}
.element-navigation .item-case.marked{
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-top-color: #ff4000;
    border-right-color: #ff4000;
    border-bottom-color: #ff4000;
}
.element-navigation .item-case-dispatcher-result-success{
    border-left-color: #00cd00;
}
.element-navigation .item-case-dispatcher-result-failure{
    border-left-color: #ff4000;
}
.element-navigation .item-case-dispatcher-result-error{
    border-left-color: #cd00cc;
}
.element-navigation .item-case-dispatcher-result-abort{
    border-left-color: #6c757d;
}
.element-navigation .case-type{
    /*height: 2vh;*/
    background-color: #409eff;
}
.element-navigation .case-method{
    /*padding-top: 0px;*/
    /*padding-right: 5px;*/
    /*padding-bottom: 0px;*/
    /*padding-left: 5px;*/
    color: #1e90ff;
}
.element-navigation .case-info{
    height: 5vh;
    width:100%;
    /*当超过宽度时隐藏*/
    white-space:nowrap;
    overflow:hidden;
}
.element-navigation .case-script{
    height: 1.5vh;
}
.element-navigation .case-script .badge-script{
    color: #fff;
    background-color: #7bbdfe;
    font-size: 30%;
}
.element-navigation .case-name{
    height: 2vh;
    line-height: 2vh;
    /*当文本超过宽度时使用省略号（white-space overflow text-overflow）*/
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

/*工具组件*/
.element-navigation .item-tool{
    border-left-width: 5px;
    border-left-color: #88929b;
    border-left-style: solid;
    height: 3vh;
    line-height: 3vh;
}
.element-navigation .item-tool:hover{
    background-color: #e8ecf5;
}
.element-navigation .item-tool.active{
    background-color: #e8ecf5;
    border-color: #88929b;
    color: #000;
    z-index: auto;
}
.element-navigation .item-tool.marked{
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-top-color: #ff4000;
    border-right-color: #ff4000;
    border-bottom-color: #ff4000;
}
.element-navigation .tool-type{
    background-color: #88929b;
}
.element-navigation .tool-name{
    width: 100%;
    /*当文本超过宽度时使用省略号（white-space overflow text-overflow）*/
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

/*逻辑控制器*/
.element-navigation .logic-controller{
    border-left-width: 5px;
    border-left-color: #88929b;
    border-left-style: solid;
}
.element-navigation .logic-controller .logic-controller-content{
    /*当文本超过宽度时使用省略号（white-space overflow text-overflow）*/
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    width: 100%;
    height: 3vh;
    line-height: 3vh;
}
.element-navigation .logic-controller .specific-logic-controller{
    background-color: #dfdfe0;
}
.element-navigation .logic-controller .specific-logic-controller.active{
    background-color: #c3c3c3;
}
.element-navigation .logic-controller .specific-logic-controller.marked{
    border-style: solid;
    border-width: 1px;
    border-color: #ff4000;
}
.element-navigation .logic-controller .logic-controller-type{
    background-color: #88929b;
}

/* 组件设置按钮样式 “...” [START] */
.element-navigation .btn-case{
    background-image: url(/static/icon/bootstrap-icons/three-dots.svg);
    background-repeat: no-repeat;
    background-position: center;
}
.element-navigation .btn-case:hover{
    background-color: #007bff;
    background-image: url(/static/icon/bootstrap-icons/three-dots-white.svg);
}

.element-navigation .btn-scene{
    background-image: url(/static/icon/bootstrap-icons/three-dots.svg);
    background-repeat: no-repeat;
    background-position: center;
}
.element-navigation .btn-scene:hover{
    background-image: url(/static/icon/bootstrap-icons/three-dots-white.svg);
    background-color: #9b9b9b;
}

.element-navigation .btn-logic-controller{
    background-image: url(/static/icon/bootstrap-icons/three-dots.svg);
    background-repeat: no-repeat;
    background-position: center;
}
.element-navigation .btn-logic-controller:hover{
    background-color: #9b9b9b;
    background-image: url(/static/icon/bootstrap-icons/three-dots-white.svg);
}

.element-navigation .btn-tool{
    background-image: url(/static/icon/bootstrap-icons/three-dots.svg);
    background-repeat: no-repeat;
    background-position: center;
}
.element-navigation .btn-tool:hover{
    background-color: #9b9b9b;
    background-image: url(/static/icon/bootstrap-icons/three-dots-white.svg);
}
/* 组件设置按钮样式 “...” [END] */

/* 案例场景添加按钮样式 “+” [START] */
.element-navigation .btn-add-case{
    background-image: url(/static/icon/bootstrap-icons/plus.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-color: #ebf4fe;
    height: 2vh;
}
.element-navigation .btn-add-case:hover{
    color: #fff;
    background-image: url(/static/icon/bootstrap-icons/plus-white.svg);
    background-color: #007bff;
    border-color: #007bff;
}

.element-navigation .btn-add-scene{
    background-image: url(/static/icon/bootstrap-icons/plus.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-color: #ebf4fe;
    height: 2vh;
    position: absolute;
    bottom: 0;
}
.element-navigation .btn-add-scene:hover{
    color: #fff;
    background-image: url(/static/icon/bootstrap-icons/plus-white.svg);
    background-color: #007bff;
    border-color: #007bff;
}

.element-navigation .btn-fold{
    background-image: url(/static/icon/bootstrap-icons/chevron-down.svg);
    background-repeat: no-repeat;
    background-position: center;
}
.element-navigation .btn-fold:hover{
    background-image: url(/static/icon/bootstrap-icons/chevron-down-white.svg);
    background-color: #9b9b9b;
}

.element-navigation .btn-unfold{
    background-image: url(/static/icon/bootstrap-icons/chevron-right.svg);
    background-repeat: no-repeat;
    background-position: center;
}
.element-navigation .btn-unfold:hover{
    background-image: url(/static/icon/bootstrap-icons/chevron-right-white.svg);
    background-color: #9b9b9b;
}
/* 案例场景添加按钮样式 “+” [END] */

.element-navigation .tippy-content{
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    padding-bottom: 0;
}

.btn-add-case-tippy-content{
    width: 30vw;
}
.btn-add-case-tippy-content .btn{
    width: 100%;
}

.element-navigation.bg-sortable-ghost{
    background-color: #ebf4fe;
}
